<template>
	<navigatorComp
		title='抽签历史'
		bgcColor="#121512"
		fontColor="#fff"
	></navigatorComp>

	<mescroll-uni
		:height="height + 'px'"
		:up="upOption"
		@init="mescrollInit"
		@down="myDownCallback"
		@up="upCallback"
	>
		<view class="cqList">
			<view class="cq" v-for="(item, index) in cqList">
				<view>
					<view class="cq_name">
						{{item.worshipName}}
					</view>
					<view class="cq_time">
						{{formatTimestamp2(item.timestamp)}}
					</view>
				</view>
				<view class="cq_qian">
					第{{item.lotsIndex}}号签
				</view>
			</view>
		</view>
	</mescroll-uni>

	<!-- 按钮弹框 -->
	<u-popup
		:show="showMoreFunc"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<u-button
			@click="confirmDel"
			v-if="createUserId == userId"
			shape="circle"
			:custom-style="moreBtnStyle"
		>
			移除成员
		</u-button>
		<u-button v-else shape="circle" :custom-style="moreBtnStyle" @click="exitcq">
			退出族谱
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, fontWeight: 600 }"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>

	<!-- 删除确认框 -->
	<myModel
		v-model:show="showDelModel"
		title="移除成员"
		content="移除成员之后,此成员无法查看此族谱的数据"
		@confirm="confirmModel"
	></myModel>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import myModel from '/components/model/index.vue';
import MineApi from '../../API/mine';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import {formatTimestamp2} from "@/utils/time.js"
const mineApi = new MineApi()

const cqList = ref([]); //成员列表

const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const upOption = {
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	// empty: {
	// 	use: false //不显示空图
	// }
};
const lastId = ref(0); //最后一个元素的id
const height = ref(0); //翻页组件高度


onLoad((options) => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
});

/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
	mineApi
		.getLotsRecord({lastId: lastId.value })
		.then((res) => {
			const curPageData = res.data.items || []; // 当前页数据
			if (lastId.value === 0) cqList.value = []; //如果是第一页需手动制空列表
			cqList.value = cqList.value.concat(curPageData); //追加新数据\
			if (curPageData.length > 0) {
				lastId.value = curPageData[curPageData.length - 1].id;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const myDownCallback = (mescroll) => {
	lastId.value = 0;
	downCallback();
};

const showMore = (item) => {
	showMoreFunc.value = true;
	currentUserId.value = item.userId;
};

const closeMore = () => {
	showMoreFunc.value = false;
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
	overflow: auto;
}

.cqList {
	margin: 24rpx 32rpx;

	.cq {
		width: 100%;
		box-sizing: border-box;
		height: 128rpx;
		background: #292b2a;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;

		.cq_name{
			font-weight: 400;
			font-size: 28rpx;
			color: #ECECEC;
			line-height: 40rpx;
		}
		
		.cq_time{
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
			margin-top: 12rpx;
		}
		
		.cq_qian{
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 44rpx;
		}
	}
}
</style>
